import React, { Component } from 'react'
import Loading from '@/components/Loading'
import './Home.less'
import { HomeDefaultApi,HomeDataApi } from '@/request/api'
import xiaolang from '@/assets/images/home/xiaolang.png'
import books from '@/assets/images/home/books.png'
import examination from '@/assets/images/home/examination.png'
import practice from '@/assets/images/home/practice.png'
import { alertMapDispatchToProps, showHideAlert } from '@/utils'
import { connect } from 'react-redux'
import List from '@/components/List'


class Home extends Component {
  state = {
    showLoading: false,
    exam: {},
    // 学科题库列表
    exemItems:[],
    // 已学
    study: '',
    // 错题
    wrong: '',
    // 收藏
    collect: ''
  }
  componentDidMount() {
    let token = localStorage.getItem('x-auth-token')
    let actionCode = localStorage.getItem('actionCode')
    console.log('存储的code',actionCode);
    if (token) {
      // 请求首页默认数据
      if (actionCode) {
        console.log('看看',actionCode);
        HomeDataApi({ actionCode }).then(res => {
          console.log('首页数据', res);
          let { exemItems,exam, study, wrong, collect } = res.data
          this.setState({exemItems,exam, study, wrong, collect})
        })
      } else {
          HomeDefaultApi().then(res => {
            console.log('home.res', res)
            let { exam, exemItems, study, wrong, collect } = res.data
            if (res.errCode === 0) {
              this.setState({
                exam,
                exemItems,
                study,
                wrong,
                collect
              })
              let code = exam.actionCode
              localStorage.setItem('actionCode',code)
            } else {
              showHideAlert(this.props, {
                showToast: true,
                icon: 'error',
                title: res.message
              })
            }
          }).catch((err) => {
        // console.log('err',err.response.data.errCode)
          if (err.response.data.errCode=== 1002) {
            // 显示loading
            this.setState({
              showLoading: true
            })
            setTimeout(() => {
              // 跳转到登录页
              this.props.history.push('/login')
            },1500)
          }
          })
      }
    } else {
      // 显示loading
      this.setState({
        showLoading: true
      })
      setTimeout(() => {
        // 跳转到登录页
        this.props.history.push('/login')
      },1500)
    }
  }
  Changesubject() {
    this.props.history.push({
      pathname: '/changesubject',
      state: {
        actionCode: this.state.exam.actionCode,
        title: this.state.exam.title
      }
    })
  }
  render() {
    return (
      <div className="home" style={{paddingBottom: '56px'}}>
        <div className="title">
          <div className="subject">{this.state.exam.title}</div>
          <div className="testSubject" onClick={this.Changesubject.bind(this)}>切换考试科目</div>
        </div>
        <div className="studyKu">
          <p className="welcome">欢迎使用IT猿题库！</p>
          <div className="down">
            <img src={xiaolang} alt="" />
            <div className="right">
              <div className="top">
                <span>已学{this.state.study}题</span>
                <span>|</span>
                <span>共{this.state.exam.itemCount}题</span>
              </div>
              <div className="down">
                <div className="err">
                  <div>{this.state.wrong}</div>
                  <div>错题</div>
                </div>
                <div className="shoucang">
                  <div>{this.state.collect}</div>
                  <div>收藏</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="category">
          <img src={examination} alt="" />
          <img src={books} alt="" />
          <img src={practice} alt="" />
        </div>
        <div className="tiku">
          <h3 className="subject_title">学科题库</h3>
          <span>坚持每一天，成长看得见</span>
        </div>
        <List  listArr={this.state.exemItems}/>
        <Loading showLoading={this.state.showLoading} />
      </div>
    )
  }
  
}

export default connect(null,alertMapDispatchToProps)(Home)
